import React from 'react';
import {Layout, Select, DatePicker, Input, Button, Table, Menu, Dropdown, Modal} from 'antd'
import WithMon from './with-mon'
import {CopyOutlined, FileExcelOutlined} from '@ant-design/icons';
import {NavLink} from 'react-router-dom'
import './Voucher.css'
import {inject,observer} from 'mobx-react'
import axios from "../../../util/http";
import * as url from "../../../util/api";

const { Option } = Select;
const { RangePicker } = DatePicker;
// let selectValue = '';
const { Search } = Input;

function handleChange(value) {
    console.log(`selected ${value}`);
    // selectValue =`selected ${value}`
}
function onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra);
}
//付款单

const data = [
    {
        key: '1',
        paymentRecordsId: 'FK-20200511-101604',
        confirmTime: '2020-05-11 10:16:08',
        payPerson: '小叮当工作室',
        paymentAccount: '现金账户',
        payMoney:1000,
        payStatusId:'现金',
        paymentAbstract:'摘要',
        paymentType:'已付款',
        paymentOperator:'杨经理',
        notes:'备注已付款，不差钱',
    },
    {
        key: '2',
        paymentRecordsId: 'FK-20200511-101632',
        confirmTime: '2020-05-11 10:16:08',
        payPerson: '大雄当工作室',
        paymentAccount: '现金账户',
        payMoney:1000,
        payStatusId:'现金',
        paymentAbstract:'摘要',
        paymentType:'已付款',
        paymentOperator:'杨经理',
        notes:'备注已付款，不差钱',
    },
    {
        key: '3',
        paymentRecordsId: 'FK-20200511-101222',
        confirmTime: '2020-05-11 10:16:08',
        payPerson: '小幅工作室',
        paymentAccount: '现金账户',
        payMoney:1002,
        payStatusId:'现金',
        paymentAbstract:'摘要',
        paymentType:'已付款',
        paymentOperator:'杨经理',
        notes:'备注已付款，不差钱',
    },
    {
        key: '4',
        paymentRecordsId: 'FK-20200511-101637',
        confirmTime: '2020-05-11 10:16:08',
        payPerson: '胖虎工作室',
        paymentAccount: '现金账户',
        payMoney:1200,
        payStatusId:'现金',
        paymentAbstract:'摘要',
        paymentType:'已付款',
        paymentOperator:'杨经理',
        notes:'备注已付款，不差钱',
    },
];
@inject('moneyMan')
@observer
class PaymentOrder extends React.Component {
    constructor(props){
        super(props)
        this.state={
            ddd:200,
            visible: false,
            paymentRecordsId:'',
            payPerson:'',
            payMoney:'',
            getData:'',
            nextData:'',
        }
    }
    componentDidMount() {
        axios({
            url:url.getAllData,
            method:'get',
        }).then(res=>{
            // console.log(res.data.data)
            this.setState({
                getData:res.data.data,
                nextData:res.data.data,
            })
        })
    }
    searchData=(value)=>{
        // console.log(value)
        let Data = this.state.getData
        if (value===''){
            let next = this.state.nextData
            this.setState({
                getData:next
            })
        } else{
            let newData = Data.filter(item=>{
                return item.payPerson===value
            })
            this.setState({
                getData:newData
            })
        }

    }
    columns = [
        {
            title: '单号',
            dataIndex: 'paymentRecordsId',
            align:'center',
        },
        {
            title: '支付时间',
            dataIndex: 'confirmTime',
            align:'center',
        },
        {
            title: '收款方名称',
            dataIndex: 'payPerson',
            align:'center',
        },
        {
            title: '扣款账户',
            dataIndex: 'paymentAccount',
            align:'center',
        },
        {
            title: '金额',
            dataIndex: 'payMoney',
            align:'center',
        },
        {
            title: '付款账户',
            dataIndex: 'payStatusId',
            align:'center',
        },
        {
            title: '摘要',
            dataIndex: 'paymentAbstract',
            align:'center',
        },
        {
            title: '状态',
            dataIndex: 'paymentType',
            align:'center',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <span>
                {this.dropdownMenu(text, record)}
            </span>
            ),
        },
    ];
    showModal = (text,record,e) => {
        let {paymentRecordsId,payPerson,payMoney}=text
        this.setState({
            visible: true,
            paymentRecordsId:paymentRecordsId,
            payPerson:payPerson,
            payMoney:payMoney,
        });
    };

    handleOk = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    PDetails=(text,record,e)=> {
        this.props.moneyMan.paymentList=text
        // this.props.moneyMan.paymentOrder(text)
        // console.log(this.props.moneyMan.paymentList)
        // console.log(text)
        //     this.props.history.push('/homepage/paymentdetailsa')


        // this.props.history.push
    }
   dropdownMenu=(text, record)=> {
        const menu = (
            <Menu>
                <Menu.Item>
                    <NavLink to={{pathname:'/homepage/paymentdetailsa',state:{title:'付款单'}}} onClick={this.PDetails.bind(this,text,record)}>
                            <CopyOutlined style={{marginRight:'10px'}}/>详情
                    </NavLink>
                </Menu.Item>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer"  onClick={this.showModal.bind(this,text,record)}>
                        <FileExcelOutlined style={{marginRight:'10px'}}/>作废
                    </a>
                </Menu.Item>
            </Menu>
        );
        return(
            <Dropdown overlay={menu}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                    . . .
                </a>
            </Dropdown>
        )
    }


    render() {
        return (
            <div>
                <Layout style={{backgroundColor:'white',marginTop:'20px'}}>
                    <div className='topBox'>
                        <div className='topLeft'>
                            <Select bordered={false} style={{marginLeft:'10px',width:140,marginRight:'20px'}} defaultValue="全部付款账号"  onChange={handleChange}>
                                <Option value="全部付款账号">全部付款账号</Option>
                                <Option value="现金">现金</Option>
                            </Select>
                            <RangePicker style={{width:400}}/>
                            <Search
                                placeholder="请输入收款方名称/付款单号"
                                onSearch={this.searchData}
                                style={{width:400}}
                            />
                        </div>
                        <div className='topRight'>
                            <NavLink to='/homepage/addpaymentorder'>
                                <Button type="primary">增加</Button>
                            </NavLink>

                        </div>

                    </div>
                </Layout>
                <div className='tableBox'>
                    <Table columns={this.columns} dataSource={this.state.getData} onChange={onChange} />
                </div>
                <Modal
                    title="付款单作废确认"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确认将付款单{this.state.paymentRecordsId}
                    <span style={{color:"red"}}>（收款方：{this.state.payPerson}， 金额：{this.state.payMoney}）</span>
                        作废？付款单作废后状态不可退回。如确认作废，请填写作废原因；</p>
                    <div style={{width:'98%',margin:'auto',border:'1px solid #ccc',height:'200px'}}>

                    </div>
                </Modal>
            </div>
        );
    }
}

export default WithMon('付款单')(PaymentOrder);

























